import React from 'react';
import CDioTable from "@/components/c_dio_table"
import { Button,message  } from 'antd';

const formOption = {
  dioOption:{
  title:"新增/编辑链接",
  },
  formOption:{
    saveUrl:'/api/promotion',
    items: [
    { pname: 'name',plabel:'个人信息',getApi:'/api/person/getAlled' ,type:"selectForm",fieldNames:{ label: 'name', value: 'id' }},
    { pname: 'proskill',plabel:'专业技能',getApi:'/api/professionalskills/getAlled' ,type:"selectForm",fieldNames:{ label: 'professionalskills', value: 'id' },mode:"multiple"   },
    { pname: 'projects',plabel:'项目经验',getApi:'/api/project/getAlled' ,type:"selectForm",fieldNames:{ label: 'ename', value: 'id' },mode:"multiple"   },
    { pname: 'link' ,plabel:'推广链接尾缀' },
    ],
  }
};
function copyBtn(record){
  let oInput = document.createElement('input')
  oInput.value = `${window.location.host}/${record.id}?link=${record.link}`;
  document.body.appendChild(oInput)
  oInput.select() // 选择对象
  document.execCommand("Copy") // 执行浏览器复制命令
  message.success('复制成功');
  oInput.remove()
}
const tableOption={
  handleTable:true,
  moreBtn:(record)=>(
    <div>
    <Button style={{marginTop:'10px'}} type='primary' onClick={() => copyBtn(record,'Nuxt3')}>复制Nuxt3个人简历链接</Button>
    </div>
  ),
    hideEdit:true,
    getApi:'/api/promotion',
    beforeshowModal:(data?:any)=>{
      let obj:any=data.id?{id:data.id,link:data.link,name:data.persoldate.id,projects:[],proskill:[]}:null
      if( obj !==null){
        data.proskill.map((item:any)=>{
       return obj.proskill.push(item.id)
      })
      data.projects.map((item:any)=>{
        return obj.projects.push(item.id)
      })
      }
    },
  columns:[
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width:'40px',
    },
    {
      title: '用户名',
      dataIndex: 'persoldate',
      key: 'persoldate',
      render: (_:any, { persoldate }:any) => (
        <>
              <div>{persoldate.name}</div>
        </> )
    },
    {
      title: '专业技能',
      dataIndex: 'proskill',
      key: 'proskill',
      render: (_:any, { proskill }:any) => (
        <>
              {proskill.map((item:any) => {
            return (
              <div key={String(item.id) +String(item.pid) }>{item.professionalSkills}</div>
            );
          })}
        </> )
    },
    {
      title: '项目经验',
      dataIndex: 'projects',
      key: 'projects',
      render: (_:any, { projects }:any) => (
        <>
             {projects.map((item:any) => {
            return (
              <div key={String(item.id) +String(item.pid) }>{item.ename}</div>
            );
          })}
        </> )
    },
    {
      title: '链接名',
      dataIndex: 'link',
      key: 'link',
    },
  ]
}
const dioTableData:cType.tableDioProTp={
  formOption,
  tableOption,
  btnTitle:"新增个人简历链接"
}
const App: React.FC = () => {
  return (
    <div>
     <CDioTable {...dioTableData}></CDioTable>
    </div>
  );
};
export default App;
